<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 事件绑定</title>
</head>
<!-- <body onload='alert("文档载入,欢迎光临!");' onunload='alert("谢谢惠顾,再会!");'> -->
<body>
	<h1 align="center">HTML 事件绑定举例</h1><hr>
	<table bordercolor="#000000" bordercolordark="#008000" border="1" bgcolor="#c0cfcf" width="100%" height="100%">
		<tr>
			<td width="20%">鼠标事件</td>
			<td>
			<ul>
				<li>
					onblur:<input type="text" value="单击鼠标后离开" size="16" onblur="alert('失去焦点');" name="T1">
					onfocus:<input type="test" value="点击本域" onfocus="alert('获得焦点');" name="T3">
				</li><br><br>
				<li>
					onclick:<input type="submit" value="单击这里" onclick="alert('鼠标单击');">
					onmousedown:<input type="submit" value="鼠标按住不放" onmousedown="alert('鼠标按下');">
				</li><br><br>
				<li>
					ondblclick:<input type="submit" value="双击这里" ondblclick="alert('鼠标双击');">
					onmouseup:<input type="submit" value="鼠标单击后释放" onmouseup="alert('鼠标弹起');">
				</li>
			</ul>
			</td>
		</tr>
		<tr>
			<td width="20%">键盘事件</td>
			<td>
			<ul>
				<li>
					onkeydown:<input type="text" value="按下键后慢慢松开" size="16" onkeydown="alert('键按下');" name="T4">
					onkeyup:<input type="test" value="按下键后然后松开" size="16" onkeyup="alert('键弹起');" name="T6">
				</li><br><br>
				<li>
					onkeypress:<input type="text" value="在这里输入内容" size="16" onkeypress="alert('内容已经改变');" name="T5">
					onchange:<input type="text" value="改变内容后离开" size="16" onchange="alert('内容已经改变');" name="T5">
				</li>
			</ul>
			</td>
		</tr>
		<tr>
			<td width="20%">按钮事件</td>
			<td>
			<ul>
				<li>
					onreset:<input type="reset" value="重置文本档">
					onsubmit:<input type="submit" value="提交测试">
				</li>
			</ul>	
			</td>
		</tr>
		<tr>
			<td width="20%">链接事件</td>
			<td>
			<ul>
				<li>
					onmousemove:在这里移动鼠标:<a href="#" onmousemove="alert('鼠标移过');">链接</a><br>
				</li>
				<li>
					onmouseout:将鼠标放在:<a href="#" onmouseout="alert('鼠标移走');">链接</a>然后离开.<br>
				</li>
				<li>
					onmouseover:将鼠标放在:<a href="#" onmouseover="alert('鼠标在这里');">链接</a>上.<br>
				</li>
				<li>
					onunload:通过点击该:<a href="http://www.baidu.com">链接</a>离开文档.<br>
				</li>
			</ul>	
			</td>
		</tr>
		<tr>
			<td width="20%">文档事件</td>
			<td>
			<ul>
				<li>
					onload:本文档载入是会弹出一个警告
				</li>
				<li>
					onselect:<input type="text" value="选择这里的文本" size="16" onselect="alert('选择了这里');" name="T7">
				</li>
			</ul>
			</td>
		</tr>
	</table>
</body>
</html>